<template>
  <div class="app">
    <h1>count: {{ count }}</h1>
    <h1>count * 10: {{ countX10 }}</h1>
    <button @click="add">count++</button>
    <hr>
<!--    <my-counter></my-counter>-->
    <my-counter index="first"/>
    <MyCounter index="second"/>
    <hr>
    <MyCounter
      v-for="(item, index) of 6"
      :key="index"
      :index="item"
    ></MyCounter>
  </div>
</template>
<script>
// 组件布局注册
// @ 是 src 的别名
// @ === src
import MyCounter from "@/components/MyCounter";
export default {
  name: 'App',
  components: {
    MyCounter
  },
  data() {
    return {
      count: 0,
      countLog: []
    }
  },
  computed: {
    countX10() {
      return this.count * 10
    }
  },
  watch: {
    count() {
      console.log('count 发生了变化', this.count)
      this.countLog.push({
        val: this.count,
        time: Date.now()
      })
    }
  },
  created() {
    this.count = 100
  },
  mounted() {
    // document.body.style.backgroundColor = 'red'
  },
  methods: {
    add() {
      this.count++
    }
  }
}
</script>

<style>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

body {
  margin: 0;
}
</style>
